<!DOCTYPE html>
<html style="height:auto; min-height: 100%;" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>Diboot 开发助理 专业版</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="Diboot轻代码开发平台" name="keywords"/>
    <meta content="高质量、高效率、智能化的软件开发平台" name="description"/>
    <meta content="苏州帝博信息技术有限公司 - www.dibo.ltd" name="author"/>
    <link href="https://devtools.diboot.com/cdn/v1/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://devtools.diboot.com/cdn/v1/adminlte.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://devtools.diboot.com/cdn/v1/toastr.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://devtools.diboot.com/cdn/v1/datepicker.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://devtools.diboot.com/cdn/v1/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://devtools.diboot.com/cdn/v1/pace.min.css" rel="stylesheet"/>
    <link rel="shortcut icon" href="https://www.diboot.com/favicon.ico"/>
    <style>.toast-top-center {
        top: 80px !important;
        right: 0;
        width: 100%
    }

    section.content {
        padding: 8px;
    }

    .form-control {
        padding: 0 2px 0 6px;
        font-size: 10px;
    }

    * {
        margin: 0;
        padding: 0;
    }

    body {
        min-width: 1080px;
    }

    [v-cloak] {
        display: none !important;
    }

    thead {
        position: relative;
    }

    table td {
        padding: 4px !important;
        text-align: center;
    }

    table th {
        text-align: center;
    }

    .contain {
        height: calc(100vh - 130px);
        width: 100%;
        position: relative;
    }

    .left-bar {
        width: 14%;
        float: left;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, .125);
        height: calc(100vh - 155px);
        position: relative;
    }

    .list-height {
        margin-top: 50px;
        height: calc(100vh - 185px);
        overflow: auto;
    }

    .fixed-item {
        width: 100%;
        position: absolute;
        border: none !important;
    }

    .fixed-item .row {
        margin-right: -12px;
        margin-left: -12px;
    }

    .right-bar {
        width: 86%;
        float: left;
        height: calc(100vh - 155px);
        overflow: auto;
    }

    #table-content {
        max-height: calc(100vh - 155px);
        overflow: auto;
    }

    .chkbtn-box {
        margin-bottom: 0 !important;
    }

    .chkbtn {
        width: 20px;
        height: 15px;
        margin-top: 8px !important;
    }

    li {
        cursor: pointer;
    }

    .close > span {
        margin-top: 8px;
        margin-left: 10px;
        width: 50px;
        display: block;
        float: left;
    }

    .modal-title {
        width: 500px;
        float: left;
        display: block;
    }

    .nav-tabs-custom {
        margin-bottom: 0;
    }

    .list-group-item {
        padding: 8px;
        border: 1px dotted #c3c3c3;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-group-item:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .list-group-item:last-child {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .list-group-item:hover {
        background-color: #e1e1e1;
    }

    .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
        color: #000;
        background-color: #d0e5ef;
        font-weight: bold;
    }

    .length-lg2 {
        width: 163px;
    }

    .length-lg1 {
        width: 115px;
    }

    .length-lg {
        width: 100px;
    }

    .length-md {
        width: 80px;
    }

    .length-sm {
        width: 54px;
    }

    .length-xs {
        width: 36px;
    }

    .length-xxs {
        width: 28px;
    }

    .minWidth-md {
        min-width: 136px;
    }

    .minWidth-lg {
        min-width: 320px;
    }

    .table td a.btn-default {
        background-color: #f4f4f4;
        border-color: #ddd;
    }

    .table td a.btn-default:hover {
        color: #fff;
        background-color: #00c0ef;
        border-color: #00acd6;
    }

    .table td a.btn-default.delete:hover {
        color: #fff;
        background-color: #f39c12;
        border-color: #e08e0b;
    }

    i.fa-key {
        color: #f39c12;
        margin-top: 6px;
    }

    .inline-block {
        display: inline-block;
    }

    .inline {
        display: inline;
    }

    button.close {
        outline: none;
    }

    .modal-body .form-group .col-md-2, .modal-body .form-group .col-md-8 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .bgColor {
        background-color: #DFF2DC !important;
    }

    label.fixed-length {
        width: 102px;
        font-weight: normal;
    }

    label.normal {
        font-weight: normal;
    }

    .table > thead > tr > th, .table > tbody > tr > td {
        text-align: left;
    }

    .table > thead > tr > th {
        padding: 4px;
    }

    .btn-padding {
        padding: 5px 4px;
    }

    .grid-element.active .btn-text {
        display: none;
    }

    .grid-element > * {
        -webkit-transition: all 300ms;
        -moz-transition: all 300ms;
        -ms-transition: all 300ms;
        transition: all 300ms;
    }

    .input_search {
        display: block;
        width: 100%;
        padding: 0 2px 0 6px;
        font-size: 14px;
        color: #555;
        background-color: #fff;
        border: none;
        outline: none;
        border-bottom: solid 1px #ccc;
    }

    .dropdown-menu > li > a {
        padding: 5px 10px;
    }

    .activeClass {
        /*background-color: #E9F9F9 !important;*/
        color: #000;
        background-color: #d0e5ef;
        font-weight: bold;
    }

    #msgWrapper {
        width: 400px;
        margin: 15px auto;
    }

    #msgWrapper a, #msgWrapper a.info {
        color: #fff;
    }

    #msgWrapper a.warn {
        color: orange;
    } </style>
</head>
<body class="hold-transition skin-green sidebar-collapse sidebar-mini">
<div class="wrapper">
    <header class="main-header">
        <a href="https://www.diboot.com" target="_blank" class="logo"><span class="logo-mini"><b>D</b>ibo</span><span
                class="logo-lg"><b>D</b>iboot 开发助理</span></a>
        <nav class="navbar navbar-static-top">
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"><span class="sr-only">Toggle navigation</span><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
            <div id="msgWrapper"></div>
        </nav>
    </header>
    <aside class="main-sidebar">
        <section class="sidebar">
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">开发工具</li>
                <li class="active"><a href="/demo/maintain/table"><i class="fa fa-database"></i>
                    <span>管理 数据库表</span></a></li>
                <li><a href="/demo/maintain/sql.html"><i class="fa fa-bolt"></i> <span>执行 SQL语句</span></a>
                </li>
                <li><a href="/demo/generate/crud.html"><i
                        class="fa fa-cube"></i><span>生成 CRUD功能</span></a></li>
                <li><a href="/demo/generate/import.html"><i class="fa fa-upload"></i> <span>生成 Excel导入功能</span></a>
                </li>
                <li><a href="/demo/generate/export.html"><i class="fa fa-download"></i> <span>生成 导出到Excel功能</span></a>
                </li>
                <li><a href="/demo/generate/report.html"><i class="fa fa-bar-chart"></i> <span>生成 统计图表功能</span></a>
                </li>
            </ul>
        </section>
    </aside>
    <div class="content-wrapper" id="app">
        <section class="content">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="/demo/maintain/table.html"><i
                            class="fa fa-database"></i> 管理 数据库表
                        <small>(维护表和字段)</small>
                    </a></li>
                    <li class="dropdown pull-right"><a class="dropdown-toggle" :class="{'hide':!editable}"
                                                       data-toggle="dropdown" href="#" aria-expanded="false"
                                                       style="color:#ff851b">提交更新 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#"
                                                       @click="updateThisTable()"><i class="fa fa-table"></i>
                                更新表和基础代码</a></li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#"
                                                       @click="updateTableAndCodes()"><i class="fa fa-code"></i>
                                更新表并生成基础代码</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active">
                        <div class="contain clearfix">
                            <div class="left-bar">
                                <div class="list-group-item operator-panel fixed-item">
                                    <div class="row">
                                        <div class="col-md-5 grid-element" style="padding:0 0 0 10px">
                                            <button type="button" data-toggle="modal" data-target="#myModal"
                                                    class="btn btn-sm btn-success btn-block btn-padding" title="新建数据库表">
                                                <i class="fa fa-plus"></i><span class="btn-text">新建表</span></button>
                                        </div>
                                        <div class="col-md-7 grid-element" style="padding:0 10px">
                                            <input class="form-control input-sm" id="searchInput" type="text"
                                                   placeholder="搜索表"/>
                                        </div>
                                    </div>
                                </div>
                                <!--显示表名-->
                                <ul class="list-group list-height">
                                    <li class="list-group-item" :class="isActive==item.tableName ? 'activeClass' : '' "
                                        v-for="(item, index) in tables"
                                        @click="changeTables(item.tableName,item.editable)"
                                        :title="item.objName?[item.tableName + '('+item.objName+')']:item.tableName"
                                        v-model="tableName">{{item.tableName}}
                                        <small v-if="item.objName">({{item.objName}})</small>
                                    </li>
                                </ul>
                            </div>
                            <div class="right-bar">
                                <div class="table-responsive" id="table-content">
                                    <table class="table table-striped table-hover">
                                        <thead>
                                        <tr>
                                            <th class="length-xxs">-</th>
                                            <th class="length-lg"><input type="text" v-model="searchVal"
                                                                         class="input_search" placeholder="字段名"/></th>
                                            <th class="length-md">字段标签</th>
                                            <th class="length-md">数据类型</th>
                                            <th class="length-sm">长度</th>
                                            <th class="minWidth-md">扩展配置</th>
                                            <!--<th class="length-xs" nowrap="nowrap">主键</th>-->
                                            <th class="length-xs" nowrap="nowrap">插入</th>
                                            <!--<th class="length-xs" nowrap="nowrap">更新</th>-->
                                            <th class="length-xs" nowrap="nowrap">列表</th>
                                            <th class="length-xs" nowrap="nowrap">查询</th>
                                            <th class="length-md">查询方式</th>
                                            <!--<th class="length-xs" nowrap="nowrap">编辑</th>-->
                                            <!--<th class="length-xs" nowrap="nowrap">必填</th>-->
                                            <th class="length-xs" nowrap="nowrap">非空</th>
                                            <th class="length-md">默认值</th>
                                            <th class="length-md">表单类型</th>
                                            <th class="minWidth-lg">关联 <span
                                                    style="font-weight: normal">(元数据/其他表)</span></th>
                                            <th class="length-xxs">-</th>
                                        </tr>
                                        </thead>
                                        <tbody v-if="tableMessages!=''">
                                        <tr v-for="(item, index) in tableMessages" draggable="true"
                                            @dragstart="dragStart($event)" @dragover="dragOver($event)"
                                            @drop="drop($event)"
                                            :class="{ bgColor: item.colIndex == -1, activeClass: item.isHighlight }">
                                            <td>
                                                <button :disabled="!item.editable" type="button"
                                                        class="btn btn-default btn-sm" @click="addNewRow(index)"
                                                        style="padding: 0 5px; margin-top: 5px;">
                                                    <i class="fa fa-key" v-if="item.primaryKey" title="在主键下方新增字段"></i>
                                                    <i class="fa fa-plus" v-if="!item.primaryKey" title="在下方新增字段"></i>
                                                </button>
                                            </td>
                                            <!--字段名-->
                                            <td><input type="text"
                                                       :readonly="(item.colName == 'id' || item.colName == 'uuid' ) &amp;&amp; item.primaryKey"
                                                       class="form-control" v-model="item.colName"/></td>
                                            <!--字段标签-->
                                            <td><input type="text"
                                                       :readonly="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey"
                                                       class="form-control" v-model="item.fieldLabel"/></td>
                                            <!--数据类型-->
                                            <td><select class="form-control"
                                                        :disabled="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey "
                                                        v-model="item.fieldPackagingType"
                                                        @change="addDefault(item.fieldPackagingType,index)">
                                                <option v-if="item.colName == 'id' &amp;&amp; item.primaryKey"
                                                        value="Long">Long
                                                </option>
                                                <option v-else-if="item.colName == 'uuid' &amp;&amp; item.primaryKey"
                                                        value="String">String
                                                </option>
                                                <option v-else="" v-for="type in fieldTypeList" :value="type">{{type}}
                                                </option>
                                            </select></td>
                                            <!--长度-->
                                            <td><input
                                                    :readonly="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey || item.fieldPackagingType == 'Boolean' || item.fieldPackagingType == 'Date' "
                                                    type="text" class=" form-control" v-model="item.colLength"/></td>
                                            <!--扩展配置-->
                                            <td>
                                                <input type="text" :readonly="!item.editable"
                                                       v-if="item.fieldPackagingType == 'Double'"
                                                       class="form-control inline-block length-sm"
                                                       v-model="item.decimal" placeholder="小数点" title="小数点位数"/>
                                                <label
                                                    v-if="item.fieldPackagingType == 'String'"
                                                    class="chkbtn-box inline normal"
                                                    :title="defaultConfig.String.extList[0].title">
                                                </label>
                                                <label
                                                    v-else-if="item.fieldPackagingType == 'Long' || item.fieldPackagingType == 'Integer' "
                                                    :title="defaultConfig.Long.title"
                                                    class="chkbtn-box length-lg normal"><input
                                                    :disabled="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey "
                                                    class="chkbtn" type="checkbox" v-model="item.extensionList" :true-value="unsigned"
                                                    :value="defaultConfig.Long.val"/>{{defaultConfig.Long.label}}
                                                </label>
                                                <select v-else-if="item.fieldPackagingType == 'Date'"
                                                            :disabled="!item.editable"
                                                            class="form-control inline-block length-lg1"
                                                            v-model="item.extensionList"
                                                            :title="defaultConfig.Date.title"
                                                            @change="dateShowType(item.extensionList,index)">
                                                <option v-for="list in defaultConfig.Date.extList" :value="list.val">{{
                                                    list.label }}
                                                </option>
                                                </select>
                                                <select v-else-if="item.fieldPackagingType == 'Double'"
                                                             :disabled="!item.editable"
                                                             class="form-control inline-block length-sm"
                                                             v-model="item.extensionList"
                                                             :title="defaultConfig.Double.title">
                                                <option v-for="list in defaultConfig.Double.extList" :value="list.val">
                                                    {{ list.label }}
                                                </option>
                                            </select></td>
                                            <!--插入-->
                                            <td><input
                                                    :disabled="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey "
                                                    class="chkbtn" type="checkbox" :value="item.isInsert"
                                                    v-model="item.isInsert" :true-value="trueValue" :false-value="falseValue"/></td>
                                            <!--列表-->
                                            <td><input
                                                    :disabled="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey "
                                                    class="chkbtn" type="checkbox" :value="item.isList"
                                                    v-model="item.isList" :true-value="trueValue" :false-value="falseValue"/></td>
                                            <!--查询-->
                                            <td><input
                                                    :disabled="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey "
                                                    class="chkbtn" type="checkbox" :value="item.isQuery"
                                                    v-model="item.isQuery" :true-value="trueValue" :false-value="falseValue"/></td>
                                            <!--查询方式-->
                                            <td><select
                                                    :disabled="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey "
                                                    class="form-control" v-model="item.queryType">
                                                <option value = "">
                                                </option>
                                                <option value = "eq">等于
                                                </option>
                                                <option value = "ne">不等于
                                                </option>
                                                <option value = "gt">大于
                                                </option>
                                                <option value = "ge">大于等于
                                                </option>
                                                <option value = "le">小于
                                                </option>
                                                <option value = "lt">小于等于
                                                </option>
                                                <option value = "bt">区间
                                                </option>
                                                <option value = "in">属于
                                                </option>
                                                <option value = "ni">不属于
                                                </option>
                                                <option value = "unlike">不等于
                                                </option>
                                                <option value = "cn">like
                                                </option>
                                            </select></td>
                                            <!--非空-->
                                            <td><input
                                                    :disabled="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey "
                                                    class="chkbtn" type="checkbox" :value="item.notnull"
                                                    v-model="item.notnull" :true-value="trueValue" :false-value="falseValue"/></td>
                                            <!--默认值-->
                                            <td>
                                                <input
                                                    :readonly="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey "
                                                    v-if="item.fieldPackagingType == 'String' || item.fieldPackagingType == 'Long' || item.fieldPackagingType == 'Integer' || item.fieldPackagingType == 'Double'"
                                                    type="text" class="form-control"
                                                    v-model="item.defaultValue"/>
                                                <select
                                                    v-else-if="item.fieldPackagingType == 'Date'" class="form-control"
                                                    v-model="item.defaultValue" :disabled="!item.editable">
                                                <option :value="list.val"
                                                        v-for="list in defaultConfig.Date.defaultList">{{ list.label}}
                                                </option>
                                                </select>
                                                <select v-else-if="item.fieldPackagingType == 'Boolean'"
                                                             class="form-control" v-model="item.defaultValue"
                                                             :disabled="!item.editable">
                                                <option :value="list.val"
                                                        v-for="list in defaultConfig.Boolean.defaultList">{{list.label
                                                    }}
                                                </option>
                                                </select>
                                                <input
                                                    :readonly="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey "
                                                    v-else="" type="text" class=" form-control"
                                                    v-model="item.defaultValue"/></td>
                                            <!--表单类型-->
                                            <td><select
                                                    :disabled="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey "
                                                    class="form-control" v-model="item.formType">
                                                <option value="SELECT"
                                                        v-if="item.fieldPackagingType == 'Boolean' || item.fieldPackagingType == 'Long' || item.fieldPackagingType == 'Integer' || item.refType == 'M'">
                                                    选择框
                                                </option>
                                                <option value="INPUT"
                                                        v-if="item.refType != 'M' &amp;&amp; (item.fieldPackagingType == 'String' || item.fieldPackagingType == 'Long' || item.fieldPackagingType == 'Integer' || item.fieldPackagingType == 'Double')">
                                                    单行输入
                                                </option>
                                                <option value="TEXTAREA"
                                                        v-if="item.refType != 'M' &amp;&amp; item.fieldPackagingType == 'String'">
                                                    多行输入
                                                </option>
                                                <option value="RICH_TEXT"
                                                        v-if="item.refType != 'M' &amp;&amp; item.fieldPackagingType == 'String' &amp;&amp; item.colLength &gt;= 200">
                                                    富文本编辑
                                                </option>
                                                <option value="DATE_PICKER"
                                                        v-if="item.refType != 'M' &amp;&amp; item.fieldPackagingType == 'Date' &amp;&amp; item.extensionList== 'yyyy-MM-dd'">
                                                    日期选择
                                                </option>
                                                <option value="DATETIME_PICKER"
                                                        v-if="item.refType != 'M' &amp;&amp; item.fieldPackagingType == 'Date' &amp;&amp; item.extensionList== 'yyyy-MM-dd HH:mm'">
                                                    日期时间选择
                                                </option>
                                                <option value="IMG_UPLOAD"
                                                        v-if="item.refType != 'M' &amp;&amp; item.fieldPackagingType == 'String'">
                                                    图片上传
                                                </option>
                                                <option value="FILE_UPLOAD"
                                                        v-if="item.refType != 'M' &amp;&amp; item.fieldPackagingType == 'String'">
                                                    文件上传
                                                </option>
                                                <option value="NONE">忽略不显示</option>
                                            </select></td>
                                            <!--关联-->
                                            <td class="text-left">
                                                <select
                                                    :disabled="(item.colName == 'id' || item.colName == 'uuid') &amp;&amp; item.primaryKey "
                                                    class="form-control inline-block length-sm" v-model="item.refType"
                                                    @change="changeRelType(item.refType,index)">
                                                <option value="">-无-</option>
                                                <option value="T"
                                                        v-if="item.fieldPackagingType == 'String' || item.fieldPackagingType == 'Long' || item.fieldPackagingType == 'Integer'">
                                                    表
                                                </option>
                                                <option value="M"
                                                        v-if="item.fieldPackagingType == 'String' || item.fieldPackagingType == 'Boolean'">
                                                    元数据
                                                </option>
                                                </select>
                                                <!--<input type="text" :disabled="!item.editable" v-if="!item.refType"-->
                                                            <!--class=" form-control inline-block length-lg2"-->
                                                            <!--placeholder="样例数据" title="输入样例数据"-->
                                                            <!--v-model="item.example"/>-->
                                                <select v-model="item.refTable"
                                                        :disabled="!item.editable"
                                                        @change="changeFieldTable(item.refTable,index)"
                                                        class="form-control inline-block length-md"
                                                        v-if="item.refType == 'T'">
                                                    <option value="">-哪个表-</option>
                                                    <option v-for="table in tables" :value="table.tableName">
                                                        {{table.tableName}}
                                                    </option>
                                                </select>
                                                <select v-model="item.refColumn" :disabled="!item.editable"
                                                             class="form-control inline-block length-md"
                                                             v-if="item.refType == 'T'">
                                                    <option value="">-哪个字段-</option>
                                                    <option v-for="col,index in item.tableColumns" :value="col">
                                                        {{col}}
                                                    </option>
                                                </select>
                                                <select v-model="item.asColumn" :disabled="!item.editable"
                                                             class="form-control inline-block length-md"
                                                             v-if="item.refType == 'T'">
                                                    <option value="">-显示字段-</option>
                                                    <option v-for="col,index in item.tableColumns" :value="col">
                                                        {{col}}
                                                    </option>
                                                </select>
                                                <select v-model="item.refColumn" :disabled="!item.editable"
                                                             class="form-control inline-block length-lg2"
                                                             v-if="item.refType == 'M'">
                                                <option value="">-哪个元数据-</option>
                                                <option v-for="meta in metadataList" :value="meta.type">{{meta.item_name}}</option>
                                                </select>
                                                <span v-if="item.refType == 'M'"><button type="button"
                                                                                              :disabled="!item.editable"
                                                                                              class="btn btn-default"
                                                                                              data-toggle="modal"
                                                                                              data-target="#metaModal"
                                                                                              style="padding:2px 6px;"
                                                                                              title="添加元数据"><i
                                                    class="fa fa-plus"></i></button></span></td>
                                            <td>
                                                <button type="button" :disabled="!item.editable" title="删除该字段"
                                                        v-if="!item.primaryKey" class="btn btn-default btn-sm delete"
                                                        @click="removeThisRow(index)"
                                                        style="padding: 0 5px; margin-top: 5px;"><i
                                                        class="fa fa-trash-o"></i></button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="modal fade in" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新建数据库表</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" style="margin-top: 5px">
                            <div class="form-group">
                                <div class="col-md-10 col-md-offset-1" style="border:none">
                                    <div class="nav-tabs-custom" style="box-shadow:none">
                                        <ul class="nav nav-tabs nav-justified" id="myTab">
                                            <li class="active"><a href="#table" style="padding: 5px">引导建表</a></li>
                                            <li><a href="#SQL" style="padding: 5px">SQL建表</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane active" id="table">
                                    <!--数据库表名-->
                                    <div class="form-group">
                                        <label class="col-md-2 col-md-offset-1 control-label">数据库表名</label>
                                        <div class="col-md-8">
                                        <input class="form-control" v-model="newTableName" placeholder="小写英文字母和_的组合"/>
                                        </div>
                                    </div>
                                    <!--业务对象名-->
                                    <div class="form-group">
                                        <label class="col-md-2 col-md-offset-1 control-label">业务对象名</label>
                                        <div class="col-md-8">
                                        <input class="form-control" v-model="objName" placeholder="业务对象标签(表的描述)"/>
                                        </div>
                                    </div>
                                    <!--ID生成策略-->
                                    <div class="form-group">
                                        <label class="col-md-2 col-md-offset-1 control-label">ID生成策略</label>
                                        <div class="col-md-8">
                                            <select class="form-control" v-model="IdType">
                                                <option value="DBAI">数据库自增ID</option>
                                                <option value="SYSGI">程序生成有序ID</option>
                                                <option value="UUID">程序生成无序UUID</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!--预置字段-->
                                    <div class="form-group">
                                        <label class="col-md-2 col-md-offset-1 control-label">预置字段</label>
                                        <div class="col-md-8">
                                            <label class="fixed-length" title="存储JSON类型数据的扩展字段">
                                                <input type="checkbox" v-model="extdata" checked/> extdata
                                            </label>
                                            <label class="fixed-length" title="是否有效的删除标记">
                                                <input type="checkbox" v-model="active" checked/> active
                                            </label>
                                            <br/>
                                            <label class="fixed-length" title="创建人ID">
                                                <input type="checkbox" v-model="create_by" checked/> create_by
                                            </label>
                                            <label class="fixed-length" title="创建时间">
                                                <input type="checkbox" v-model="create_time" checked/> create_time
                                            </label>
                                            <label class="fixed-length" title="更新人">
                                                <input type="checkbox" v-model="update_by" checked/> update_by
                                            </label>
                                            <label class="fixed-length" title="更新时间">
                                            <input type="checkbox" v-model="update_time" checked/> update_time
                                            </label>
                                        </div>
                                    </div>
                                    <!--生成代码-->
                                    <div class="form-group">
                                        <label class="col-md-2 col-md-offset-1 control-label">生成代码</label>
                                        <div class="col-md-8" style="padding-top: 7px">
                                            <label class="fixed-length" title="生成Model, Service, Mapper等基础代码"><input
                                            type="checkbox" onclick="checkbox(this)" v-model="generateCommonCodes"/> 生成基础代码 </label>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <div class="col-md-10 col-md-offset-1">
                                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal"> 取 消</button>
                                            <button type="button" class="btn btn-primary"
                                                    :disabled="(!newTableName || !objName) &amp;&amp; !SQL" @click="createNewTable()">
                                                创建数据库表
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="SQL">
                                    <!--建表SQL-->
                                    <div class="form-group">
                                        <div class="col-md-10 col-md-offset-1">
                                        <textarea @blur="buildTableSql" v-model="SQL"
                                        style="width: 100%;min-height: 95px;padding: 4px 10px;outline: none"
                                        placeholder="建表SQL"></textarea>
                                        </div>
                                    </div>
                                    <!--生成代码-->
                                    <div class="form-group">
                                        <label class="col-md-2 col-md-offset-1 control-label">生成代码</label>
                                        <div class="col-md-8" style="padding-top: 7px">
                                            <label class="fixed-length" title="生成Model, Service, Mapper等基础代码"><input
                                                    type="checkbox" onclick="checkbox(this)" v-model="generateCommonCodes"/> 生成基础代码 </label>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <div class="col-md-10 col-md-offset-1">
                                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal"> 取 消</button>
                                            <button type="button" class="btn btn-primary"
                                                    :disabled="!SQL"@click="createNewTable()">
                                                创建数据库表
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--新增元数据-->
        <div class="modal fade in" id="metaModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新建元数据</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-md-3 control-label">元数据类型名称 <span style="color: #f00">*</span></label>
                                <div class="col-md-8">
                                    <input class="form-control" v-model="newMetaDataConfig.itemName"
                                           placeholder="元数据类型名称，如: 性别"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">元数据类型编码 <span style="color: #f00">*</span></label>
                                <div class="col-md-8">
                                    <input class="form-control" v-model="newMetaDataConfig.type"
                                           placeholder="元数据类型编码，大写英文，如: GENDER"/>
                                </div>
                            </div>
                            <div class="form-group" id="item-box" style="max-height: 150px;overflow: auto">
                                <label class="col-md-3 control-label">包含子项</label>
                                <div class="col-md-8">
                                    <div class="row" v-for="(item, index) in newMetaDataConfig.children"
                                         style="margin-bottom: 5px">
                                        <div class="col-md-5">
                                            <input class="form-control" v-model="item.itemName"
                                                   placeholder="子项名称，如: 男"/>
                                        </div>
                                        <div class="col-md-5">
                                            <input class="form-control" v-model="item.itemValue"
                                                   placeholder="子项编码, 如: M"/>
                                        </div>
                                        <div class="col-md-1" v-if="index == newMetaDataConfig.children.length - 1">
                                            <button type="button" title="添加子项" @click="addItem(index)"
                                                    class="btn btn-info" style="padding:0 5px;margin-top: 5px"><i
                                                    class="fa fa-plus"></i></button>
                                        </div>
                                        <div class="col-md-1" v-else="">
                                            <button type="button" title="删除子项" @click="removeItem(index)"
                                                    class="btn btn-default" style="padding:0 5px;margin-top: 5px"><i
                                                    class="fa fa-trash-o"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">备注</label>
                                <div class="col-md-8">
                                    <input class="form-control" v-model="newMetaDataConfig.common" placeholder="备注"/>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <div class="col-md-10 col-md-offset-1">
                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal"> 取 消</button>
                            <button type="button" class="btn btn-primary"
                                    :disabled="!newMetaDataConfig.itemName || !newMetaDataConfig.type"
                                    @click="addMetaData"> 确认添加
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/jquery.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/bootstrap.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/adminlte.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/toastr.min.js"></script>
<script src="https://devtools.diboot.com/cdn/v1/vue.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/datepicker.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/pace.min.js"></script>
<script src="../static/maintain/table.js" ></script>
<link rel="stylesheet" type="text/css" href="angular-toastr.css" />
<script type="text/javascript" src="angular-toastr.tpls.js"></script>

<script>
    var unsigned="unsigned";
    var trueValue=1;
    var falseValue=0;
//    $("select").find("option:first").prop("selected",true);
    $('select').attr('selectedIndex', 0);
    $(function () {
    var $tableCont = $('#table-content');
    $tableCont.scroll(function () {
        var scrollTop = this.scrollTop;
        $tableCont.find('thead').css({'transform': 'translateY(' + scrollTop + 'px)', 'background-color': '#fff'});
    });
    $("#searchInput").keyup(function () {
        var val = $(this).val();
        if (val) {
            $(".list-group-item:not(.operator-panel)").hide();
            $('.list-group-item:contains(' + val + ')').show();
        } else {
            $(".list-group-item").show();
        }
    });
    $("#searchInput").focus(function () {
        $(this).closest('.grid-element').removeClass('col-md-7').addClass('col-md-9').siblings('.grid-element').addClass('active').removeClass('col-md-5').addClass('col-md-3');
    });
    $("#searchInput").blur(function () {
        if (!$(this).val()) {
            $(this).closest('.grid-element').addClass('col-md-7').removeClass('col-md-9').siblings('.grid-element').removeClass('active').addClass('col-md-5').removeClass('col-md-3');
        }
    });

    $(function () {
        $('#myTab a:first').tab('show');
        })
        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        })


}) </script>
</body>
</html>